<template>
     <div style="padding:10px;" id="app">
        <div class="panel panel-primary" style="border-color:gray;">
            
            <div class="panel-heading" style="background-color: gray;border-color: gray;">柜员管理</div>
            <el-input
                placeholder="请输入柜员名"
                v-model="empName"
                clearable>
            </el-input>
            <el-button icon="el-icon-search" circle style="position:absolute;right:15px;top:49px;border:none;" @click="queryEmpInfoByEmpName"></el-button>
            <table class="table table-bordered table-striped text-center">
                <thead>
                    <tr>
                        <th  style="    width: 13%;">柜员号</th>
                        <th  style="    width: 10%;">姓名</th>
                        <th  style="    width: 12%;">角色权限</th>
                        <th style="    width: 20%;">密码</th>
                        <th  style="    width: 11%;">性别</th> 
                        <th  style="    width: 12%;">电话</th>
                        <th   style="    width: 10%;">操作</th>
                    </tr> 
                </thead>
                <tbody>
                    <template v-for="(row, index) in empInfo ">
                        <tr v-if="index>=(curpage-1)*pagesize&&index<curpage*pagesize">
                        <td>{{row.employeeInfo.employeeId}}</td>
                        <td>{{row.employeeInfo.ename}}</td>
                        <td>{{row.roleInfo.roleName}}</td>

                        <td><input type="password" class="form-control" disabled v-bind:value="row.employeeInfo.password" style="border:none;background: #f5f5f5;height:0px;font-size: 16px;"/></td>
                        <!--性别-->
                        <td v-if="row.employeeInfo.esex=='1'">男</td>
                        <td v-if="row.employeeInfo.esex=='0'">女</td>

                        <td>{{row.employeeInfo.etelephone}}</td>
                        <td>
                            <a href="#" @click="Edit(row)">编辑</a>&nbsp;&nbsp;
                            <!-- <a href="#" @click="Delete(row.employeeId)" id="deleteDom">删除</a> -->
                            <button class="btn btn-primary btn-lg" @click="tranEmployeeId(row.employeeInfo.employeeId)" data-toggle="modal" data-target="#myModal" style="    padding: 0px;background: none;color: #333;border: none;font-size: 13px;padding-top: -6px;margin-top: -1px;">删除</button>
                            <!-- 模态框（Modal） -->
                            <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                                <div class="modal-dialog">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                                            <h4 class="modal-title" id="myModalLabel">柜员信息删除</h4>
                                        </div>
                                        <div class="modal-body">确定要删除该柜员信息嘛</div>
                                        <div class="modal-footer">
                                            <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                                            <button type="button" class="btn btn-primary" data-dismiss="modal" @click="Delete(deleteEmpId)" style="    background: gray;border-color: gray;">确认删除</button>
                                        </div>
                                    </div><!-- /.modal-content -->
                                </div><!-- /.modal -->
                            </div>
                        </td>
                        </tr>
                    </template>
                    <tr v-if="rowtemplate.employeeInfo">
                        <td><input type="text" class="form-control" disabled v-model="rowtemplate.employeeInfo.employeeId" /></td>
                        <td><input type="text" class="form-control" v-model="rowtemplate.employeeInfo.ename" /></td>
                        <td>
                            <select class="form-control" v-model="rowtemplate.employeeInfo.authorityId">
                            <option v-for="authority in authoritys" v-bind:value="authority.roleId">
                                {{ authority.roleName }}
                            </option>
                            </select>
                        </td>
                        <td><input type="password" maxlength="9" class="form-control" v-model="rowtemplate.employeeInfo.password" /></td>
                        <td>
                            <select class="form-control" v-model="rowtemplate.employeeInfo.esex">
                                <option value="-1">选择性别</option>
    　　　　　　　　　　　　　　　　 <option value="1">男</option>
    　　　　　　　　　　　　　　　　 <option value="0">女</option>
    　　　　　　　　　　　　　</select>
                        </td>
                        <td><input type="text" class="form-control" maxlength="11" v-model="rowtemplate.employeeInfo.etelephone" oninput = "value=value.replace(/[^\d]/g,'')"/></td>
                        <td><button type="button" class="btn btn-primary" v-on:click="Save" style="background-color:gray;border-color:gray;">保存</button></td>
                    </tr>

                    <tr v-else="rowtemplate.employeeInfo==null">
                        <td><input type="text" class="form-control" disabled/></td>
                        <td><input type="text" class="form-control" v-model="employeeName"/></td>
                        <td>
                            <select class="form-control" v-model="authorityId">
                            <option v-for="authority in authoritys" v-bind:value="authority.roleId">
                                {{ authority.roleName }}
                            </option>
                            </select>
                        </td>
                        <td><input type="password" maxlength="9" class="form-control" v-model="employeePass"/></td>
                        <td>
                            <select class="form-control" v-model="employeeSex">
                                <option value="-1">选择性别</option>
    　　　　　　　　　　　　　　　　 <option value="1">男</option>
    　　　　　　　　　　　　　　　　 <option value="0">女</option>
    　　　　　　　　　　　　　</select>
                        </td>
                        <td><input type="text" class="form-control" v-model="empTelephone" maxlength="11" oninput = "value=value.replace(/[^\d]/g,'')"/></td>
                        <td><button type="button" class="btn btn-primary" v-on:click="Save" style="background-color:gray;border-color:gray;">保存</button></td>
                    </tr>
                </tbody>
            </table>


            <nav style="float:right;">
                <ul class="pagination pagination-lg">
                    <template v-for="page in Math.ceil(empInfo.length/pagesize)">
                        <li v-on:click="PrePage()" id="prepage" v-if="page==1" class="disabled"><a href="#">上一页</a></li>
                        <li v-if="page==1" class="active" v-on:click="NumPage(page, $event)"><a href="#">{{page}}</a></li>
                        <li v-else v-on:click="NumPage(page, $event)"><a href="#">{{page}}</a></li>
                        <li id="nextpage" v-on:click="NextPage()" v-if="page==Math.ceil(empInfo.length/pagesize)"><a href="#">下一页</a></li>
                    </template>
                </ul>
            </nav>


        </div>
    </div>
</template>

<script>
import Qs from 'qs'
export default {
    inject:['reload'],
    data() {
        return {
            empInfo: [],
            rowtemplate: { 'employeeInfo.id': 0, 'employeeInfo.employeeId': '', 'employeeInfo.ename': '', 'employeeInfo.authorityId':0,'employeeInfo.password':'', 'employeeInfo.esex':'-1','employeeInfo.etelephone':'','employeeInfo.roleName':''},
            pagesize: 7,
            curpage:1,//当前页的页码
            editOrAdd:1,//0为编辑1为添加
            deleteEmpId:'',
            empName: '',//柜员名
            authorityId:"0",
            authoritys:[
                {roleId:0,roleName:"角色权限"}
            ],
            employeeName:'',//新增
            employeePass:'',
            employeeSex:-1,
            empTelephone:'',
        }
    },
    watch: {
        empName:function(){
            if(this.empName==''){//侦听搜索输入框是否有值  若有则不处理  若无则获取到所有的柜员信息
                this.getEmployeeList();
            }
        }
    },
    mounted: function(){
        this.getEmployeeList();
        this.getRoleList(); 
    },
    methods: {
        queryEmpInfoByEmpName:function(){//根据柜员名查询
            var data=Qs.stringify({
                "empName":this.empName
            });
            this.$axios
            .post('/bk-employee/queryEmpInfoByEmpName',data,
                {headers:{'Content-Type':'application/x-www-form-urlencoded'}}
            )
            .then(result => {
                this.empInfo=[];
                for(var i=0;i<result.data.data.length;i++){
                    this.empInfo.push(
                        result.data.data[i]
                    );
                }
            })
            .catch(failResponse => {})
        },
        getRoleList: function () {
            this.$axios
            .get('/bk-role/getAllRoleList',
                {headers:{'Content-Type':'application/x-www-form-urlencoded'}}
            )
            .then(result => {
            for(var i=0;i<result.data.data.length;i++){
                this.authoritys.push(
                    result.data.data[i]
                );
            }
            })
            .catch(failResponse => {})
        },
        getEmployeeList:function(){//获取所有的柜员信息
            this.$axios
            .post('/bk-employee/getEmployeeRoleVoList',
                  {headers:{'Content-Type':'application/x-www-form-urlencoded'}}
            )
            .then(result => {
                for(var i=0;i<result.data.data.length;i++){
                    this.empInfo.push(
                        result.data.data[i]
                    );
                }
            })
            .catch(failResponse => {})
        },
        Save: function (event) {
            var data=JSON.stringify(this.rowtemplate);
            var addData=Qs.stringify({
                "employeeName":this.employeeName,
                "employeePass":this.employeePass,
                "employeeSex":this.employeeSex,
                "empTelephone":this.empTelephone,
                "authorityId":this.authorityId
            });
            if(this.editOrAdd==1){//添加
                var empPassRegix=/^[\d]{9}$/;
                var telRegix=/^[\d]{11}$/;
                if(''==this.employeeName.trim()){
                    this.$message.error('姓名不能为空');
                }else if(this.authorityId==0){
                    this.$message.error('请勾选角色权限');
                }else if(this.employeePass.trim()==''){
                    this.$message.error('密码不能为空');
                }else if(this.employeeSex==-1){
                    this.$message.error('请勾选性别');
                }else if(!this.empTelephone.match(telRegix)){
                    this.$message.error('电话号码必须为11位');
                }else{
                    this.$axios
                    .post('/bk-employee/addEmployeeInfo',
                        addData,{
                            headers: {
                            'Content-Type': 'application/x-www-form-urlencoded',
                            }
                        }
                    )
                    .then(result => {
                        if(result.data.code==200){
                            //this.$router.go(0)
                            this.reload();
                        }else{
                            this.$message.error(result.data.message);
                        }
                    })
                    .catch(failResponse => {})
                }
            }else if(this.editOrAdd==0){//编辑
                var empPassRegix=/^[\d]{9}$/;
                var telRegix=/^[\d]{11}$/;
                if(''==this.rowtemplate.employeeInfo.ename.trim()){
                    this.$message.error('姓名不能为空');
                }else if(this.rowtemplate.employeeInfo.authorityId==0){
                    this.$message.error('请勾选角色权限');
                }else if(this.rowtemplate.employeeInfo.password.trim()==''){
                    this.$message.error('密码必须要9位');
                }else if(this.rowtemplate.employeeInfo.esex==-1){
                    this.$message.error('请勾选性别');
                }else if(!this.rowtemplate.employeeInfo.etelephone.match(telRegix)){
                    this.$message.error('电话号码必须为11位');
                }else{
                    this.$axios
                    .post('/bk-employee/editOrAddEmployeeInfo/0',
                        data,{
                            headers: {
                            'Content-Type': 'application/json;charset=UTF-8',
                            }
                        }
                    )
                    .then(result => {
                        if(result.data.code==200){
                            //this.$router.go(0)
                            this.reload();
                            this.rowtemplate={ 'employeeInfo.id': 0, 'employeeInfo.employeeId': '', 'employeeInfo.ename': '', 'employeeInfo.authorityId':0,'employeeInfo.password':'', 'employeeInfo.esex':'-1','employeeInfo.etelephone':'','employeeInfo.roleName':''};   
                        }else{
                            this.$message.error(result.data.message);
                        }
                    })
                    .catch(failResponse => {})
                    this.editOrAdd==1;
                } 
            }
        },
        Delete: function (empid) {
            var data=Qs.stringify({
                'empId':empid,
            });
            this.$axios
            .post('/bk-employee/deleteEmployeeInfo',
                data,{
                    headers: {
                    }
                }
            )
            .then(result => {
                if(result.data.code==200){
                    this.reload();
                    this.rowtemplate={ id: 0, employeeId: '', ename: '', authorityId: '', esex: '',etelephone:'' };   
                }else{
                    this.$message.error(result.data.message);
                }
            })
            .catch(failResponse => {})
        },
        tranEmployeeId: function(empId){
            this.deleteEmpId=empId;
        },
        Edit: function (row) {
            this.editOrAdd=0;
            this.rowtemplate = row;
        },
        //上一页方法
        PrePage: function (event) {
            $(".pagination .active").prev().trigger("click");
        },
        //下一页方法
        NextPage: function (event) {
            $(".pagination .active").next().trigger("click");
        },
        //点击页码的方法
        NumPage: function (num, event) {
            if (this.curpage == num) {
                return;
            }
            this.curpage = num;
            $(".pagination li").removeClass("active");
            if (event.target.tagName.toUpperCase() == "LI") {
                $(event.target).addClass("active");
            }
            else {
                $(event.target).parent().addClass("active");
            }
            if (this.curpage == 1) {
                $("#prepage").addClass("disabled");
            }
            else {
                $("#prepage").removeClass("disabled");
            }
            if (this.curpage == Math.ceil(this.empInfo.length / this.pagesize)) {
                $("#nextpage").addClass("disabled");
            }
            else {
                $("#nextpage").removeClass("disabled");
            }
        }
    }
}
</script>
<style>
    table thead tr th {
        text-align:center;
    }
</style>
